
<template>
  <div class="gift-weaper">
      <div class="gift-weaper-notice">
          <!-- TODO 小程序文字滚动 -->
          <text-marquee :marqueeText="noticeText"></text-marquee>
      </div>
      <div class="gift-weaper-box">
          <div class="gift-weaper-box-item">
              <div class="gift-weaper-box-item-left">
                  <img :src="goodInfo.is_compress === 1 ?  goodInfo.img_src + '480x480':goodInfo.img_src" alt="">
              </div>
              <div class="gift-weaper-box-item-right">
                  <div class="title">{{goodInfo.item_title}}</div>
                  <div class="address">
                      <p><span style="margin-right: 5px">{{goodInfo.receiver_name}}</span><span>{{goodInfo.receiver_mobile}}</span></p>
                      <p>{{goodInfo.receiver_address}}</p>
                  </div>
                  <div class="priopt">
                      <div class=""><div class="price" v-html="scaleGoodsPriceFn(goodInfo.payment, 'nowprice')"></div></div>
                      <div class="btn">
                        <div class="btn-buy red-gra-btn" @click="navToCollcateDetail(goodInfo.item_id)">查看商品</div>
                      </div>
                  </div>
              </div>
          </div>
          <div class="gift-weaper-box-step">
              <img src="https://img.wifenxiao.com/h5-wfx/images/item/gift/gift_step.png" alt="">
          </div>
          <div class="gift-weaper-box-text">
              <textarea v-model="message" placeholder="说点什么吧..." @blur="inputBlur"></textarea>
          </div>
      </div>
      <div class="gift-weaper-btn">
          <div class="gift-weaper-btn-item red-gra-btn" @click="putGiftToBox">把礼物放进盒子</div>
      </div>
  </div>
</template>

<script>
/*
 * @Author: zhangmeng
 * @Date: 2020-06-08 18:00:50
 * @Last Modified by: zhangmeng
 * @Last Modified time: 2020-07-02 17:59:48
 */
import Vue from 'vue'
// import { NoticeBar } from 'vant'
// Vue.use(NoticeBar)
import { scaleGoodsPrice } from '@/utils/index.js'
import { getGiftPay, getGiftDetail } from '@/api/item/activity.js'
import textMarquee from '@/components/textMarquee' // 文字滚动

export default Vue.extend({
  data() {
    return {
      noticeText: '您好：当前有专业客服人员在线，随时与我们联系。',
      goodInfo: {},
      message: ''
    }
  },
  components: {
    textMarquee
  },
  mounted() {
    const sendData = {}
    sendData.id = this.$route.query.order_id
    this.getGiftPayFun(sendData)
  },
  methods: {
    /**
       * 商品价格 整数放大
       */
    scaleGoodsPriceFn(price, className) {
      return scaleGoodsPrice(price, className)
    },

    /**
     * 查看商品
     */
    navToCollcateDetail(id) {
      this.$JumpName(this, 'item-detail', { detailId: id })
    },

    inputBlur() {
      window.scroll(0, 0)
    },

    /**
     * 把礼物放进盒子
     */
    putGiftToBox() {
      const sendData = {}
      sendData.id = this.goodInfo.order_id
      sendData.type = 1
      sendData.peer_message = this.message
      sendData.peer_type = 1
      this.$loadingWrap.show()
      setTimeout(() => {
        this.$loadingWrap.close()
      }, 10000)
      getGiftDetail(sendData).then(res => {
        this.$loadingWrap.close()
        if (res.status === 1) {
          setTimeout(() => {
              window.open('/gift-detail?id=' + res.data.order_id + '&type=1')
          }, 500)
        } else {
          this.$Error(res.msg)
        }
      })
    },

    /**
     * 获取送礼页面基本数据
     */
    getGiftPayFun(sendData) {
      getGiftPay(sendData).then(res => {
        if (res.status === 1) {
          const data = res.data.info
          this.goodInfo = data
          this.message = data.peer_message
        } else {
          this.$Error(res.msg)
        }
      })
    }
  }
})
</script>

<style lang="scss">
    @import "src/styles/mixin";
    .gift-weaper {
        position: relative;
        &-notice {

        }
        &-box {
            margin: 20px 25px;
            background-color: #fff;
            border-radius: 20px;
            padding: 25px;
            box-sizing: border-box;
            &-item {
                display: flex;
                flex-direction: row;
                flex-wrap: nowrap;
                &-left {
                    width: 186px;
                    height: 186px;
                    border-radius: 10px;
                    overflow: hidden;
                    img{
                        width: 100%;
                        height: 100%;
                    }
                }
                &-right {
                    flex: 1;
                    color: #333;
                    margin-left: 20px;
                    position: relative;
                    .title {
                        font-weight: bold;
                        margin-bottom: 18px;
                        @include lineClamp(24px, 1.4, 1);
                    }
                    .address {
                        color: #999;
                        font-size: 22px;
                        p {
                            margin-bottom: 6px;
                            &:last-child {
                                margin-bottom: 0;
                            }
                        }
                    }
                    .priopt {
                        position: absolute;
                        bottom: 0;
                        width: 100%;
                        .btn {
                            position: absolute;
                            top: 50%;
                            right: 0px;
                            transform: translate(0, -50%);
                            &-buy{
                                color: #fff;
                                line-height: 24px;
                                font-size: 22px;
                                font-weight: 500;
                                padding: 15px 26px;
                                border-radius: 26px;
                            }
                        }
                    }
                }
                
            }
            &-step {
                width: 100%;
                padding: 90px 23px 0;
                box-sizing: border-box;
                img {
                    width: 100%;
                    height: 100%;
                }
            }
            &-text {
                width: 100%;
                box-sizing: border-box;
                padding: 60px 5px 0;
                textarea {
                    width: 100%;
                    height: 268px;
                    border: 1px solid #EDEDED;
                    border-radius: 3px;
                    padding: 25px;
                    resize: none;
                }
            }
        }
        &-btn {
            position: fixed;
            bottom: 0;
            left: 0;
            right: 0;
            background: #fff;
            height: 98px;
            padding: 11px 25px;
            &-item {
                color: #fff;
                line-height: 28px;
                font-size: 28px;
                font-weight: 500;
                padding: 27px 26px;
                border-radius: 38px;
                text-align: center;
            }
        }
    }
</style>
